<template>
	<view class="valueSddedServices">
		<u-tabs :list="list" font-size="28" active-color="#357CD4" :is-scroll="false" :current="current"
			@change="change">
		</u-tabs>
		
		<u-notice-bar duration="5000" font-size="26" color="#494949" :volume-icon="true" :speed="80"
			type="none" :list="hasCombo">
		</u-notice-bar>
		<!-- <view class="title">
			<view class="payqudao">
				<view style="display: flex;align-items: center;">
					<u-image src="@/static/home/zeng.png" width="37rpx" height="37rpx" mode="aspectFit"></u-image>
					<view class="payname">增值服务</view>
				</view>
				<view style="overflow: hidden;">
					<u-notice-bar duration="5000" font-size="26" color="#494949" :volume-icon="false" :speed="80"
						type="none" :list="hasCombo">
					</u-notice-bar>
				</view>
			</view>
		</view> -->

		<view class="tabs_box">
			<view class="tabs_box-list" v-for="(item,index) in ComboData[current]" :key="index">
				<view class="tabs_title" :class="[numsUnit[index]]">
					<view class="tabs_title-left" :class="[yearUnit[index]]">{{item.name}}
						{{item.sweet}}糖果/{{unit[item.type]}}
					</view>
					<view class="tabs_title-right">消耗{{item.sweet}}糖果 | 续期{{time[item.type]}}天</view>
				</view>
				<view class="tabs-content" :class="[yearUnit[index]]">
					<view class="tabs-content-left">
						<view class="tabs-content-left-title">{{item.desc.split('\n')[0]}}</view>
						<view class="tabs-content-left-desc">{{item.desc.split('\n')[1]}}</view>
						<view class="tabs-content-left-desc">{{item.desc.split('\n')[2]}}</view>
					</view>
					<view class="tabs-content-right">
						<u-image v-if="item.status==3" width="195rpx" height="67rpx" src="@/static/home/buy.png">
						</u-image>
						<u-image v-else width="195rpx" height="67rpx"
							:src="require(`@/static/home/`+btnTextColor[index]+btnText[item.status]+`.png`)"
							@click="tijiao(item)"></u-image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hasCombo: [],
				hastime: '',
				ComboData: [],
				list: [{
					name: '包月'
				}, {
					name: '包季度'
				}, {
					name: '包年'
				}],
				unit: {
					1: '月',
					2: '季度',
					3: '年'
				},
				btnText: {
					0: 'buy',
					1: 'Renew',
					2: 'upgrade',
					3: 'buy'
				},
				btnTextColor: {
					0: 'z',
					1: 'c',
					2: 'f',
					3: 'h'
				},
				time: {
					1: '30',
					2: '90',
					3: '365'
				},
				numsUnit: {
					0: 'tabs_title_one',
					1: 'tabs_title_two',
					2: 'tabs_title_three'
				},
				yearUnit: {
					0: 'yue',
					1: 'ri',
					2: 'nian'
				},
				current: 0,
			}
		},
		mounted() {
			this.getCombo();
			this.getComboData();
		},
		methods: {
			//获取增值服务
			getCombo() {
				this.hasCombo = [];
				this.$u.api.getCombAvailable({
					mid: uni.getStorageSync('mid')
				}).then(res => {
					if (res.code == 0) {
						this.hasCombo.push(res.data);
					}
				})
			},
			getComboData() {
				let month = [];
				let season = [];
				let year = [];
				this.$u.api.getCombo({
					mid: uni.getStorageSync('mid')
				}).then(res => {
					if (res.code == 0) {
						res.data.forEach(item => {
							if (item.type == 1) {
								month.push(item);
							} else if (item.type == 2) {
								season.push(item);
							} else if (item.type == 3) {
								year.push(item);
							}
						});
						this.ComboData.push(month);
						this.ComboData.push(season);
						this.ComboData.push(year);
					}
				})
			},
			change(index) {
				this.current = index;
			},
			tijiao(item) {
				uni.navigateTo({
					url: '/pages/line/home/buy?item=' + JSON.stringify(item)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.valueSddedServices {
		.title {
			padding: 0 30rpx;

			.payqudao {
				background-color: #ffffff;
				width: 690rpx;
				height: 65rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-top-left-radius: 20rpx;
				border-top-right-radius: 20rpx;
				font-size: 30rpx;

				.payname {
					color: #313134;
					font-size: 30rpx;
					font-weight: bold;
					padding-left: 10rpx;
					width: 190rpx;
				}
			}
		}

		.tabs_box {
			padding: 40rpx 30rpx;

			.tabs_box-list {
				width: 100%;
				margin-bottom: 39rpx;
				display: flex;
				flex-direction: column;

				.tabs-content {
					background-size: 100% 100%;
					background-repeat: no-repeat;
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: space-around;
					color: white;
					padding: 30rpx 20rpx;

					.tabs-content-left {
						.tabs-content-left-title {
							font-size: 36rpx;
							font-weight: 500;
							margin-bottom: 30rpx;
						}

						.tabs-content-left-desc {
							font-size: 24rpx;
						}
					}
				}

				.tabs_title {
					padding: 0 12rpx;
					height: 50rpx;
					font-size: 24rpx;
					border-radius: 6rpx 6rpx 0rpx 0rpx;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					position: relative;

					.tabs_title-left {
						position: absolute;
						left: 0;
						background: #cccdea;
						height: 60rpx;
						top: -10rpx;
						padding: 0 12rpx;
						border-radius: 6rpx 6rpx 0rpx 0rpx;
						display: flex;
						align-items: center;

						.yue {
							background-image: url(@/static/home/one.png);
						}

						.ri {
							background-image: url(@/static/home/two.png);
						}

						.nian {
							background-image: url(@/static/home/three.png);
						}
					}

					.tabs_title-right {
						color: white;
					}


					.yue {
						background-color: #EAEAFC;
						color: #8A8BF2;
					}

					.ri {
						background-color: #F9ECD8;
						color: #FA9D0D;
					}

					.nian {
						background-color: #FBE4DE;
						color: #FD9D84;
					}
				}

				.tabs_title_one {
					background-color: #AAABF3;
				}

				.tabs_title_two {
					background-color: #FBC067;
				}

				.tabs_title_three {
					background-color: #FDB4A1;
				}

				.yue {
					background-image: url(@/static/home/one.png);
				}

				.ri {
					background-image: url(@/static/home/two.png);
				}

				.nian {
					background-image: url(@/static/home/three.png);
				}
			}
		}
	}
</style>
